<template>
	<view class="page">
		<view class="top">
			<view class="pick">
				<u-text text="选择站点"></u-text>
				<view class="right" @click="selectSite">
					<u-text :text="siteName"></u-text>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="btns">
				<u-text text="网格分布" :color="btn1 && '#3662EC'" @click="clicks(1)"></u-text>
				<u-text text="实际库存" :color="btn2 && '#3662EC'" @click="clicks(2)"></u-text>
			</view>
		</view>
		<view class="map">
			<map style="width: 100%; height: 99%;" latitude="32.019096" longitude="120.271931" scale=14
				:markers="makers"></map>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
	</view>
</template>
<script>
export default {
	data() {
		return {
			btn1: true,
			btn2: false,
			show: false,
			columns: ['中国', '美国', '日本'],
			siteName: "xxz站",
			makers: [
				{
					id: 0,
					latitude: 32.019096,
					longitude: 120.271931,
					width: 50,
					height: 50,
					iconPath: '/static/map/maker1.png',
					zIndex: 10,
					callout: {
						content: '80%',
						color: '#ffffff',
						bgColor: 'red',
						fontSize: '32rpx',
						anchorX: '0rpx',
						anchorY: '70rpx',
						display: 'ALWAYS'
					}
				},
				{
					id: 1,
					latitude: 32.011567,
					longitude: 120.263435,
					width: 50,
					height: 50,
					iconPath: '/static/map/maker2.png',
					callout: {
						content: '10%',
						color: '#ffffff',
						bgColor: 'red',
						fontSize: '32rpx',
						anchorX: '0rpx',
						anchorY: '70rpx',
						display: 'ALWAYS'

					},
				}
			]
		}
	},
	methods: {
		clicks(arg) {
			if (arg == 1) {
				this.btn1 = true
				this.btn2 = false
				this.makers.splice(0)
				this.makers.push({
					id: 0,
					latitude: 32.019096,
					longitude: 120.271931,
					width: 50,
					height: 50,
					iconPath: '/static/map/maker1.png',
					callout: {
						content: '80%',
						color: '#ffffff',
						bgColor: 'red',
						fontSize: '32rpx',
						anchorX: '0rpx',
						anchorY: '70rpx',
						display: 'ALWAYS',
					}
				},
					{
						id: 1,
						latitude: 32.011567,
						longitude: 120.263435,
						width: 50,
						height: 50,
						iconPath: '/static/map/maker2.png',
						callout: {
							content: '10%',
							color: '#ffffff',
							bgColor: 'red',
							fontSize: '32rpx',
							anchorX: '0rpx',
							anchorY: '70rpx',
							display: 'ALWAYS'

						},
					},)
			} else {
				this.btn1 = false
				this.btn2 = true
				this.makers.splice(0)
				this.makers.push({
					id: 2,
					latitude: 32.026727,
					longitude: 120.270885,
					width: 120,
					height: 56,
					iconPath: '/static/map/maker3.png',
					callout: {
						content: '库存：888L \n 醇价：8.88/L',
						// color: '#ffffff',
						bgColor: '#ffffff',
						fontSize: '22rpx',
						anchorX: '38rpx',
						anchorY: '84rpx',
						display: 'ALWAYS'

					},
				})
			}
		},
		selectSite() {
			this.show = true
		},
		confirm(e) {
			this.siteName = e.value[0] + '站'
			this.show = false
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-flow: column nowrap;
}

.top {
	padding: 20rpx 30rpx;
}

.pick {
	border-radius: 10px;
	background-color: white;
	padding: 30rpx 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;

	.right {
		width: 500rpx;
		display: flex;
		justify-content: flex-end;

	}
}

.btns {
	border-radius: 10px;
	background-color: white;
	display: flex;
	padding: 30rpx 20rpx;

	.u-text {
		flex: 0 1 auto !important;
		width: 150rpx !important;

	}
}

.map {
	flex: 1;
}
</style>
